<template>
  <div id="CommonTableMapContainer" class="common-table-map-container" />
</template>

<script>
import wkx from '@/utils/wkx/wkx'
import loadMap from '@/utils/loadMap'
export default {
  name: 'Map',
  props: {
    // 默认中心点
    center: {
      type: Object,
      default: () => ({ longitude: 118.62, latitude: 24.89 })
    },
    // 默认缩放级别
    zoom: {
      type: Number,
      default: 13
    },
    // 默认线颜色
    strokeColor: {
      type: String,
      default: '#ee9900'
    },
    // 默认线宽度
    strokeWidth: {
      type: Number,
      default: 2
    },
    gisData: {
      type: String,
      default: null
    }
  },
  data() {
    this.map = null
    return {}
  },
  computed: {},
  watch: {
    gisData() {
      this.drawByParams()
    }
  },
  created() {
    loadMap()
  },
  mounted() {
    loadMap(this.onLoad)
  },
  methods: {
    drawByParams() {
      if (this.gisData) {
        this.draw({ data: this.gisData, isFocus: true })
      }
    },
    // 初始化地图
    onLoad() {
      // eslint-disable-next-line no-undef
      this.map = new EV.Map('CommonTableMapContainer')
      // eslint-disable-next-line no-undef
      const point = new EV.LngLat(this.center.longitude, this.center.latitude)
      this.map.setCenter(point, this.zoom)
      this.drawByParams()
    },
    /*
      画图
      @params
        data     : ''      # 地图线,区域等数据
        isFocus  : false   # 是否聚焦到第一个点
    */
    draw({ data = '', isFocus = false }) {
      if (!this.map) return
      if (Array.isArray(data)) {
        data.map((i, index) => {
          this.draw({ data: i, isFocus: isFocus && !index })
        })
      } else {
        const geo = wkx.Geometry.parse(data).toGeoJSON()
        if (geo.type === 'LineString') {
          if (isFocus) {
            let firstPoint = geo.coordinates[0]
            // eslint-disable-next-line no-undef
            firstPoint = new EV.LngLat(firstPoint[0], firstPoint[1])
            this.map.setCenter(firstPoint, this.zoom)
          }
          this.drawPolyLine(geo.coordinates)
        }
        if (geo.type === 'Polygon') {
          if (isFocus) {
            let firstPoint = geo.coordinates[0]
            // eslint-disable-next-line no-undef
            firstPoint = new EV.LngLat(firstPoint[0], firstPoint[1])
            this.map.setCenter(firstPoint, this.zoom)
          }
          this.drawPolygon(geo.coordinates)
        }
      }
    },
    /*
      画折线
      @params
        -
          - number : 0  # 经度
          - number : 0  # 纬度
    */
    drawPolyLine(polyline) {
      // eslint-disable-next-line no-undef
      const data = polyline.map((point) => new EV.LngLat(point[0], point[1]))
      // eslint-disable-next-line no-undef
      const line = new EV.PolyLine(data, {
        strokeWidth: this.strokeWidth,
        strokeColor: this.strokeColor
      })
      this.map.addOverlay(line)
    },
    drawPolygon(polygon) {
      for (const polygonElement of polygon) {
        // eslint-disable-next-line no-undef
        const data = polygonElement.map((point) => new EV.LngLat(point[0], point[1]))
        // eslint-disable-next-line no-undef
        const line = new EV.Polygon(data)
        this.map.addOverlay(line)
      }
    }
  }
}
</script>
<style lang='scss'>
.common-table-map-container {
  border: 0px;
  width: 100%;
  height: 450px;
  background-color: #f4f3f0;
  .map_toolbarctrl_close,
  .map_toolbarctrl_open {
    display: none;
  }
}
</style>
